<template>
  <div>
    异世界地图
    <!-- <img class="img-inline" :src="a" alt="" /> -->
    <!-- <pre>{{ objCtx }}{{ bgMap }}{{ ctx }}</pre> -->
    <!-- <pre>{{ viewport }}</pre> -->
    <div class="img-box box-1b1" ref="canvas-box">
      <canvas
        id="canvas"
        ref="canvas"
        @mousedown="onMousedown"
        @mousemove="onMouseMove"
        @mouseup="onMouseUp"
        @mouseleave="onMouseleave"
      ></canvas>
    </div>
    <div>{{ msg }}</div>
    <!-- <pre>{{ arrPoint }}</pre> -->
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';

import { AdvancedImageLoader } from '@/assets/AdvancedImageLoader.js';
import { Viewport } from '@/assets/anotherWorld/viewport.js';
import { Area } from '@/assets/anotherWorld/point.js';
import { aim } from '@/assets/anotherWorld/unit.js';

let map2 = require('@/assets/icon/map2.jpg');
let pokeball = require('@/assets/icon/pokeball.png');

export default {
  name: 'name',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      msg: '',
      a: map2,
      pokeball: pokeball,
      ctx: null,
      objCtx: {
        // 绘制对象，也是主要的操作对象
        width: 0,
        height: 0,
      },
      bgMap: {
        // 背景地图，
        self: null,
        width: 0,
        height: 0,
      },
      viewport: null,
      arrPoint: [],
      isDragging: false,
      dragStart: {
        x: 0,
        y: 0,
      },
      dataPoint: [
        { x: 2072, y: 1323, w: 77, h: 70, name: '若叶镇' },
        { x: 1680, y: 1330, w: 106, h: 79, name: '吉花市' },
        { x: 1428, y: 900, w: 150, h: 121, name: '桔梗市' },
        { x: 1246, y: 1556, w: 129, h: 109, name: '桧皮镇' },
        { x: 1070, y: 1128, w: 141, h: 190, name: '满金市' },
        { x: 1172, y: 633, w: 129, h: 109, name: '缘朱市' },
        { x: 790, y: 883, w: 109, h: 111, name: '浅葱市' },
        { x: 542, y: 1152, w: 108, h: 162, name: '湛蓝市' },
        { x: 1598, y: 657, w: 88, h: 88, name: '卡吉镇' },
        { x: 1991, y: 619, w: 120, h: 107, name: '烟墨市' },
      ],
    };
  },
  computed: {
    ...mapState([]),
    // viewport: function() {
    //   let x = 0;
    //   let y = 0;
    //   const w = this.objCtx.width;
    //   const h = this.objCtx.height;
    //   return {
    //     offest: [x, y], //视窗原点在地图上的偏移
    //     offsetMap: [x, y, x + w, y + h], //视窗在地图上的坐标（左上，右下）
    //     center: [x + w / 2, y + h / 2], //中心点坐标
    //   };
    // },
  },
  methods: {
    ...mapMutations([]),
    init: function() {
      const canvasBox = this.$refs['canvas-box'];
      const canvas = this.$refs['canvas'];
      this.objCtx.width = canvas.width = canvasBox.offsetWidth;
      this.objCtx.height = canvas.height = canvasBox.offsetHeight;
      this.viewport = new Viewport(canvas);
      this.aim = new aim({
        innerRadius: 30,
        outerRadius: 150,
        color: '#f00',
      });
      const ctx = canvas.getContext('2d');
      // 事件监听
      // canvas.addEventListener('mousedown', (e) => {});
      // canvas.addEventListener('mousemove', (e) => {});
      // canvas.addEventListener('mouseup', (e) => {});
      this.ctx = ctx;
      this.dataPoint.forEach((v) => {
        let p = new Area(
          {
            x1: v.x,
            y1: v.y,
            x2: v.x + v.w,
            y2: v.y + v.h,
            img: new Image(),
          },
          v
        );
        p.img.src = this.pokeball;
        this.arrPoint.push(p);
      });
    },
    test: function() {
      let img = new Image();
      img.src = this.a;
      img.onload = (e) => {
        this.bgMap.self = img;
        this.bgMap.width = img.width;
        this.bgMap.height = img.height;
        this.viewport.setBgMapSize(img.width, img.height);
        this.draw({ x: -this.bgMap.width / 2, y: -this.bgMap.height / 2 });
      };
    },
    draw: function({ x, y }) {
      // console.log(this.bgMap);
      // console.log(this.objCtx);
      this.ctx.clearRect(0, 0, this.objCtx.width, this.objCtx.height);
      this.viewport.moveViewport(x, y);

      this.ctx.drawImage(
        this.bgMap.self,
        // ...this.视窗坐标,
        ...this.viewport.getXYWH(),
        0,
        0,
        this.objCtx.width,
        this.objCtx.height
      );
      let vpxy = this.viewport.getXY1XY2();
      this.arrPoint.forEach((v) => {
        let r = v.getRelativeCoordinatesInViewport(...vpxy);
        if (r) {
          this.ctx.drawImage(
            v.img,
            r.sx,
            r.sy,
            r.sWidth,
            r.sHeight,
            r.x,
            r.y,
            r.width,
            r.height
          );
        }
      });
      this.aim.draw(this.ctx, this.objCtx);
    },
    onMousedown(event) {
      this.isDragging = true;
    },
    onMouseMove(event) {
      if (!this.isDragging) return;
      let nx = event.movementX;
      let ny = event.movementY;
      this.draw({ x: nx, y: ny });
    },
    onMouseUp() {
      this.isDragging = false;
      let center = this.viewport.getCenter();
      console.log(center);
      let objArea = this.arrPoint.find((obj) => {
        return obj.isInArea(center);
      });

      if (objArea != undefined) {
        this.msg = `当前在 ${objArea.object.name}`;
      } else {
        this.msg = '未知位置';
      }
    },
    onMouseleave() {
      this.isDragging = false;
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.init();
    this.test();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
#canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: red;
}
</style>
